<template>
  <div class="body1" style="padding-top:10px;">
      <div class="form_select">
        <div>
          <el-date-picker
            v-model="form.date"
            type="date"
            placeholder="预约日期" 
            size="small" 
            class="select_option1"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            >
          </el-date-picker>
          <el-button type="primary"  size="small" @click="getList">搜索</el-button>
          <el-button :type="type == 1 ? 'info' : 'primary'"  size="small" @click="dateSearch(1)">昨日预约</el-button>
          <el-button :type="type == 2 ? 'info' : 'primary'"  size="small" @click="dateSearch(2)">当日预约</el-button>
          <el-button :type="type == 3 ? 'info' : 'primary'"  size="small" @click="dateSearch(3)">明日预约</el-button>
        </div>
        <div class="select_right">
          <el-button type="primary"  size="small" @click="exportExcel">导出excel</el-button>
        </div>
      </div>
      <div class="time_table">
        <table border="0" width="100%" cellspacing="0" cellpadding="0" 
        style="border-collapse:collapse;table-layout : fixed ;overflow-x: scroll;">
          <tr>
            <th>----</th>
            <th v-for="(item,index) in timeArr" :key="index">{{item}}</th>
          </tr>
          <tr v-for="(item,index) in list" :key="index">
            <td :colspan="iitem.len" v-for="(iitem,iindex) in item" :key="iindex"
            :class="iitem.name ? '' : 'bg'">
            {{iitem.name ? iitem.name : '可约'}}
            </td>
          </tr>
        </table>
      </div>
  </div>
</template>
 
<script>
export default {
  name: "MarkTime",
  data() {
    return {
      form:{},
      list:[],
      satausArr:[
        {id:0,name:'全部'},
        {id:1,name:'未完成'},
        {id:2,name:'已完成'},
        {id:3,name:'已取消'}
      ],
      timeArr:['09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30',
			'13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00',
            '17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00'],
      type:2
    };
  },
  created: function() {
    this.getList()
  },
  methods: {
    getList:function(){
        this.form.oa_id = localStorage.getItem('oa_id')
        var that = this
        this.$get('pc/mark/time',this.form).then((res) => {
          that.list = res.data
        })
    },
    dateSearch:function(key){
      this.type = key
      this.form.type = key
      this.getList()
    },
    exportExcel:function() {
      let title = '预约时间表'
      excelExport(title)
      return false;
    }
  }
};
</script>
<style>
.time_table{
  padding:20px 20px 20px 20px;
  background:#fff;
  overflow-x: scroll;
}
.time_table table tr{
  width:100%;
}
.time_table table tr td{
	border:1px solid #C8C7CC;
	text-align: center;
	height:35px;
	line-height:35px;
  width:100px;
}
.time_table table tr th{
	border:1px solid #C8C7CC;
	text-align: center;
	height:35px;
	line-height:35px;
  width:100px;
}
.bg{
  background:#b3ffd9;
}
</style>